
  /* claro/form/Common.css 

*/
/*========================= common css =========================

*/
/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' 

*/
.claro .dijitTextBoxError .dijitValidationContainer {
    background-color : #d46363;
    background-image : url('images/error.png');
    background-position : top center;
    border : solid #d46464 0px;
    border-left-width : 1px;
    width : 9px;
}
.claro .dijitTextBoxError .dijitValidationIcon {
    width : 0px;
    background-color : transparent !important;/* so the INPUT doesn't obscure the border in rtl+a11y 
*/

}

  /* .dijitInputField .dijitPlaceHolder is explicitly listed below because
   dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
   won't affect it 
*/
.claro .dijitTextBox .dijitInputContainer, .claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder {
    padding : 2px;
}
.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode {
    
  /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner 
	*/
border-color : #b5bcc7;
    -webkit-transition-property : background-color, border;
    -webkit-transition-duration : .35s;
}
.claro .dijitTextBox {
    background-color : #f7fcff;
}

  /* hover 
*/
.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode {
    border-color : #769dc0;
    -webkit-transition-duration : .25s;
}
.claro .dijitTextBoxHover {
    background-color : #e9f4fe;
    background-image : url('images/textBox_back.png');
    background-repeat : repeat-x;
}

  /* error state 
*/
.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode {
    border-color : #d46464;
}
.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer {
    background-color : #fdf7f7;
}

  /* focused state 
*/
.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode {
    border-color : #769dc0;
    -webkit-transition-duration : .1s;
}
.claro .dijitTextBoxFocused {
    background-color : #fff;
    background-image : url('images/textBox_back.png');
    background-repeat : repeat-x;
}
.claro .dijitTextBoxFocused .dijitInputContainer {
    background : #fff;
}
.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode {
    border-color : #ce4f4f;
}

  /* disabled state 
*/
.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode {
    border-color : #d3d3d3;
}
.claro .dijitTextBoxDisabled {
    background-color : #efefef;
    background-image : none;
    color : #818181;
}

  /*========================= for special widgets =========================

*/
/* ComboBox 

*/
.claro .dijitComboBox .dijitArrowButtonInner {
    background-image : url("images/commonFormArrows.png");
    background-position : -35px 53%;
    background-repeat : no-repeat;
    margin : 0px;
    width : 16px;
    height : 100%;
    border : 1px solid #fff;
}
.claro .dijitTextBox .dijitInputField {
    padding-top : 1px;
    
  /* 1px and not 2px due to 1px padding on the INPUT 
	*/
padding-bottom : 1px;
}
.claro .dijitTextBox .dijitInputInner {
    
  /* left padding helps line up input text with menu text 
	*/
padding : 1px 2px 1px 0;/* match 1px vertical border on button 
*/

}
.claro .dijitTextBox .dijitValidationContainer {
    padding : 0 0 2px 0;/* match 1px border height in button 
*/

}
.claro .dijitComboBox .dijitButtonNode {
    background-color : #ebeef4;
    background-image : url("images/formHighlight.png");
    background-repeat : repeat-x;
}

  /* hover state 
*/
.claro .dijitComboBoxHover .dijitButtonNode {
    background-color : #abd6ff;
}
.claro .dijitComboBoxHover .dijitArrowButtonInner {
    background-position : -70px 53%;
}

  /* focused state 
*/
.claro .dijitComboBoxFocused .dijitButtonNode {
    background-color : #7dbefa;
    background-position : 0px -177px;
    padding : 1px;
}
.claro .dijitComboBoxFocused .dijitArrowButtonInner {
    background-position : -70px 53%;
    border : 0px none;
}

  /* disabled state 
*/
.claro div.dijitComboBoxDisabled .dijitArrowButtonInner {
    
  /* specific selector set to override background-position setting from Button.js
	 * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) 
	*/
background-position : 0px 50%;
    background-color : #f1f1f1;
}

  /*========================= hacks for browsers =========================
*/
/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calcuate error 
*/
.dj_ff3 .claro .dijitInputField input[type="hidden"] {
    display : none;
    height : 0;
    width : 0;
}

  /* ie6 doesn't support transparent background img 
*/
.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode {
    background-image : none;
}

  /* In quirks mode strangely all browsers do border-box sizing for input nodes.
 * Drop the 1px white border around ComboBox arrow to fix misalignment of icon, and to jump on focus.
 * Note also that these rules are copying what is done on focus.
 
*/
.dj_quirks .claro .dijitComboBox .dijitArrowButtonInner {
    border : 0px;
}
.dj_quirks .claro .dijitComboBox .dijitArrowButtonContainer {
    padding : 1px;
}
